<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <link href="js/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="js/layui/layui.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/iframe.js"></script>
</head>
<body>
<div id="conts">
    <form class="form-horizontal" role="form">
        <div class="form-horizontal">
            <label class="">研究区域范围: </label>
            <div class="form-inline ">
                <label class="" for="jingdu1">经度: </label>&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" class="form-control input-sm" id="jingdu1" readonly="readonly"
                       placeholder="经度" value="118.759926">&nbsp;&nbsp;&nbsp;
                <label class="" for="weidu1">纬度: </label>
                <input type="text" class="form-control input-sm" id="weidu1" readonly="readonly"
                       placeholder="纬度" value="32.068626">
            </div>
            <div class="form-inline ">
                <label class="" for="jingdu2">经度: </label>&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" class="form-control input-sm" id="jingdu2" readonly="readonly"
                       placeholder="经度" value="118.802875">&nbsp;&nbsp;&nbsp;
                <label class="" for="weidu2">纬度: </label>
                <input type="text" class="form-control input-sm" id="weidu2" readonly="readonly"
                       placeholder="纬度" value="32.046348">
            </div>
        </div>
        <div class="form-horizontal">
            <label class="">构建的模型类型: </label>
            <div class="form-horizontal ">
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 单车租借数量预测模型
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 单车归还数量预测模型
                    </label>
                </div>
            </div>
            <input type="button" class="btn btn-dark" onclick="getResult()" value="提交"/>
        </div>
    </form>
</div>
<script>
    function getResult() {
        //加载层
        layer.load();
        setTimeout(function(){
            layer.closeAll('loading');
            open();
        }, 2000);
    }
    function open() {
        // 打开数据处理页面
        var index = layer.open({
            type: 2,
            title: '数据处理',
                area: ['1300px', '650px'],
            fixed: false, //不固定
            shade: 0.5,
            maxmin: true,
            content: 'iframe.html'
        });
        layer.full(index);
    }
</script>
</body>
<style>
    #conts {
        left: 20px;
        top: 100px;
    }
</style>
</html>
